@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
   font-family: Ext2;
   src: url('./assets/fonts/Exo2.ttf') format('truetype');
}

@font-face {
   font-family: UbuntuMono;
   src: url('./assets/fonts/UbuntuMono.ttf') format('truetype');
}

.full {
   @apply absolute left-0 right-0 top-0 bottom-0;
}

main.content {
   height: calc(100vh - 56px);
}

@layer components {
   a {
      @apply cursor-pointer text-sky-700 font-semibold;
   }

   h2 {
      @apply font-medium text-2xl;
   }
   input, select {
      @apply focus:outline-none bg-zinc-100 px-3 text-sm;
   }
   input{
      @apply py-1
   }
   select{
      @apply py-2
   }

   button {
      @apply px-6 py-0.5 text-white tracking-wider bg-indigo-600 hover:bg-indigo-700 hover:shadow-md transition;
   }

   /**Left Nav 表单*/
   form {
      @apply flex flex-col space-y-2 my-2;
   }
   .form-item-content {
      @apply flex items-center;
   }
   .form-item-content > :last-child {
      @apply grow;
   }
   .form-item-msg {
      @apply relative -right-1/3 text-xs pt-1 pl-2 text-red-500;
   }

   /**Left Nav 导航栏*/
   .nav-li {
      @apply px-2 h-10 leading-10 transition text-slate-500 cursor-pointer font-medium block;
   }
   .nav-li:hover,
   .nav-li.active {
      @apply pl-4 bg-slate-300 text-black border border-r-slate-900 ;
   }

   .box {
      @apply px-8 py-5 bg-white shadow-lg hover:shadow-lg duration-150;
   }
   .checkbox {
      @apply h-4 w-4 border-gray-200 cursor-pointer accent-indigo-600 rounded-lg;
   }
   .icon {
      @apply cursor-pointer flex justify-center items-center rounded-full h-6 w-6 hover:bg-gray-200;
   }
}

@layer utilities {
   .scrollbar::-webkit-scrollbar {
      width: 4px;
      height: 4px;
   }

   .scrollbar::-webkit-scrollbar-track {
      border-radius: 100vh;
      background: #9b9997;
   }

   .scrollbar::-webkit-scrollbar-thumb {
      background: #4e4e4e;
      border-radius: 100vh;
   }
}
